<!DOCTYPE html>
<html>

<head>
    <script src="libwstpdf.js"></script>
    <title>九寨沟</title>
    <style>
        body {
            margin: 0;
        }
        
        #pdfshow {
            text-align: center;
            margin: 0;
            padding: 0;
        }
        
        p {
            margin: 0;
            background-color: grey;
            height: 21px;
        }
        
        .red {
            background-color: red;
        }
        
        img {
            object-fit: contain;
        }
        
        .white {
            background-color: grey;
        }
        
        .statusBar {
            position: fixed;
            height: 40px;
            bottom: 0px;
            left: 50%;
            transform: translateX(-50%);
            opacity: 0.8;
        }
        
        #pageInput {
            -webkit-appearance: none !important;
            border: none;
            width: auto;
        }
        
        #pageInput::placeholder {
            font-size: 16px;
        }
    </style>

</head>

<body>
    <div id="pdfshow" class="red">

    </div>
    <div class="statusBar">
        <button class="homeBtn">&lt;&lt;</button>
        <button class="pageUp">&lt;</button>
        <input id="pageInput" min=1>/
        <span id='pages'></span>
        <button class="pageDown">&gt;</button>
        <button class="endBtn">&gt;&gt;</button>
        <select name="" id="zoomPdf">
            <option value="0.5">50%</option>
            <option value="1" selected >100%</option>
            <option value="1.5">150%</option>
            <option value="2">200%</option>
        </select>
    </div>
    <script>
        // 禁用缩放
        //Chorme
        window.addEventListener('mousewheel', function(event) {
            if (event.ctrlKey === true || event.metaKey) {
                event.preventDefault();
            }
        }, {
            passive: false
        });

        //firefox
        window.addEventListener('DOMMouseScroll', function(event) {
            if (event.ctrlKey === true || event.metaKey) {
                event.preventDefault();
            }
        }, {
            passive: false
        });

        Module.preRun = function() {

            FS.createPreloadedFile(".", "test.pdf", "test.pdf", true, false);
        }
        var DPIbase = 30;
        var content = ""

        Module.postRun = function() {
            var doc = wstpdf.openDocument("test.pdf");
            var pages = wstpdf.countPages(doc);
            inputTag = document.querySelector("#pageInput");
            inputTag.setAttribute("oninput", "if(value>" + pages + ")value=" + pages + ";value=value.replace('[^0-9]','')");
            document.querySelector("#pages").textContent = pages;
            //获取窗口大小对比pdf大小，计算一整个屏幕放一张PDF
            for (i = 30; i < 100; i += 0.1) {
                x = wstpdf.pageHeight(doc, 1, i)
                if (x == window.innerHeight - 25) {
                    DPIbase = parseFloat(i).toFixed(1)
                    break
                }
            }
            var DPIchanged = DPIbase
            document.querySelector("#zoomPdf").addEventListener("change", function(e) {
                DPIchanged = DPIbase * e.target.value;
                document.getElementById('pdfshow').innerHTML = ""
                renderTag(DPIchanged, 1);
                var imgs = document.querySelectorAll('img');
                var maps = document.querySelectorAll('map');
                console.log(imgs)
                lazyload(DPIchanged, imgs);
            })
            renderTag(DPIchanged, 1)
            var imgs = document.querySelectorAll('img');
            var maps = document.querySelectorAll('map');
            lazyload(DPIchanged, imgs);
            // 滚屏函数
            window.onscroll = function() {
                lazyload(DPIchanged, imgs);
            }

            function renderTag(DPI, pageNum = 1) {
                // 获取PDF 高与宽
                var imgHeight = wstpdf.pageHeight(doc, 1, DPI);
                var imgWidth = wstpdf.pageWidth(doc, 1, DPI);
                for (i = 1; i <= pages; i++) {
                    // ' + 'style="width:' + imgWidth + 'px;height:' + imgHeight + 'px;"' + '
                    content += '<div class="white" id="page' + i + 'div"><img class="lazyImg"  id="page' + i + '" usemap="#page' + i + 'map" src="./img/timg.gif" >' + "<p>&nbsp</p>" + '<map id="page' + i + 'map" name="page' + i + 'map"></map></div>'
                }
                document.getElementById('pdfshow').innerHTML = content
                var imgs = document.querySelectorAll("img")
                for (j = 0; j < imgs.length; j++) {
                    imgs[j].setAttribute("style", "width:" + imgWidth + ";height:" + imgHeight)
                }
                //加载第一页
                var img = document.getElementById("page" + pageNum);
                img.src = wstpdf.drawPageAsPNG(doc, pageNum, DPI);
                var map = document.getElementById("page" + pageNum + "map");
                map.innerHTML = wstpdf.pageLinks(doc, pageNum, DPI);
                if (pageNum != 1) {
                    var img = document.getElementById("page" + pageNum - 1);
                    img.src = wstpdf.drawPageAsPNG(doc, pageNum - 1, DPI);
                    var map = document.getElementById("page" + pageNum - 1 + "map");
                    map.innerHTML = wstpdf.pageLinks(doc, pageNum - 1, DPI);
                }
            }

            // 渲染函数
            function renderImg(DPI, pageNum) {
                // 获取图片列表，即img 与 map标签列表
                //创建3个img进行预加载
                var temp0 = new Image();
                var temp1 = new Image();
                var temp2 = new Image();
                ///获取 对应页面的
                var temp1PNG = wstpdf.drawPageAsPNG(doc, pageNum + 1, DPI)
                var temp2PNG = wstpdf.drawPageAsPNG(doc, pageNum + 2, DPI)
                var temp0PNG = wstpdf.drawPageAsPNG(doc, pageNum, DPI)
                temp1.src = temp1PNG;
                temp2.src = temp2PNG;
                temp0.src = temp0PNG;
                maps[pageNum].innerHTML = wstpdf.pageLinks(doc, pageNum + 1, DPI)
                maps[pageNum + 1].innerHTML = wstpdf.pageLinks(doc, pageNum + 2, DPI)
                maps[pageNum - 1].innerHTML = wstpdf.pageLinks(doc, pageNum, DPI)
                    // onload判断图片加载完毕，真是图片加载完毕，再赋值给dom节点
                temp1.onload = function() {
                    // 获取自定义属性data-src，用真图片替换假图片
                    imgs[pageNum].src = temp1PNG;
                    imgs[pageNum + 1].src = temp2PNG;
                    imgs[pageNum - 1].src = temp0PNG;
                    // 替换屏幕外加载过的图片 以提高性能
                    // if (pageNum + 2 < pages & pageNum - 3 > 0) {
                    //     imgs[pageNum - 3].src = "./img/timg.gif"
                    //     imgs[pageNum + 2].src = "./img/timg.gif"
                    // }
                }
            }
            // 懒加载实现函数
            function lazyload(DPI, imgs) {
                // 获取PDF 高与宽
                var imgHeight = wstpdf.pageHeight(doc, 1, DPI);
                var imgWidth = wstpdf.pageWidth(doc, 1, DPI);
                // 可视区域高度
                var h = window.innerHeight;
                //滚动区域高度
                var s = document.documentElement.scrollTop || document.body.scrollTop;
                //获取水平滚动条位置
                var l = document.documentElement.scrollLeft || document.body.scrollLeft;
                // 单张pdf高度 
                var perHeight = 25 + imgHeight;
                // 计算第几张图片
                var pageNum = parseInt((h + s - 8) / perHeight);
                // document.querySelector("#pageInput").
                inputTag.addEventListener("change", function(e) {
                    window.scroll(l, (e.target.value - 1) * perHeight);
                    lazyload(e.target.value)
                })
                document.querySelector(".homeBtn").addEventListener("click", function(e) {
                    window.scroll(l, 0)
                })
                document.querySelector(".endBtn").addEventListener("click", function(e) {
                    window.scroll(l, document.body.offsetHeight)
                })
                document.querySelector(".pageUp").addEventListener("click", function(e) {
                    window.scroll(l, (parseInt(s / perHeight) - 1) * perHeight)
                })

                document.querySelector(".pageDown").addEventListener("click", function(e) {
                    window.scroll(l, (parseInt((s + 1) / perHeight) + 1) * perHeight)
                })

                inputTag.value = pageNum >= pages ? pageNum : pageNum + 1
                if (pageNum > pages - 2) pageNum = pages - 2
                if (pageNum == 0) pageNum = 1
                renderImg(DPI, pageNum)
            }

        }
    </script>
</body>

</html>